<template>
    <show-modal
        :title="modalTitle"
        :loading="loading"
        :width="width"
        @cancel="
            () => {
                $emit('cancel');
            }
        "
        @submit="submit"
    >
        <a-form-model :model="form" :rules="rules" v-bind="layout" ref="form">
            <a-form-model-item prop="time" label="时间">
                <a-date-picker
                    style="width:100%;"
                    v-model="form.time"
                    show-time
                    :valueFormat="dateFormat"
                    placeholder="请选择时间"
                >
                </a-date-picker>
            </a-form-model-item>
            <a-form-model-item prop="location" label="地点">
                <a-input v-model.trim="form.location" placeholder="请输入地点" />
            </a-form-model-item>
            <a-form-model-item prop="content" label="任务">
                <a-textarea v-model.trim="form.content" :maxLength="200" placeholder="请输入任务" />
            </a-form-model-item>
        </a-form-model>
    </show-modal>
</template>

<script>
import { addTool } from '@/api/home';
import { rules } from './rules';
import moment from 'moment';

export default {
    name: 'ToolBasic',
    props: {
        date: {
            type: String,
            default: ''
        },
        userId: {
            type: String | Number,
            default: ''
        }
    },
    data() {
        let originForm = {
            time: undefined,
            userId: '',
            location: '',
            content: '',
            status: 0
        };
        return {
            originForm,
            rules,
            width: '540px',
            form: {
                ...originForm
            },
            loading: false,
            modalTitle: '任务信息',
            layout: {
                labelCol: { span: 3 },
                wrapperCol: { span: 21 }
            },
            dateFormat: 'YYYY-MM-DD HH:mm:ss'
        };
    },
    async created() {
        this.form.time = moment(this.date).format('YYYY-MM-DD HH:mm:ss');
        this.form.userId = this.userId;
    },
    methods: {
        //提交
        submit() {
            this.$refs.form.validate(async valid => {
                if (valid) {
                    try {
                        let res = await addTool(this.form);
                        this.$message.success('操作成功!');
                        this.$emit('submit');
                    } finally {
                        this.loading = false;
                    }
                }
            });
        },
        cancel() {
            this.$emit('cancel');
        }
    }
};
</script>
<style lang="scss" scoped>
// /deep/.ant-popover-inner-content {
//     width: 160px !important;
// }
// .lunarCls /deep/.ant-calendar.ant-calendar-picker-container-content {
//     width: 300px !important;
// }
// .lunarCls .ant-calendar-date {
//     width: 40px !important;
//     height: 40px;
//     line-height: 16px;
// }
</style>
